<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      .box {
        width: 50px;
        height: 50px;
        background-color: skyblue;
      }

      .result {
        margin-top: 30px;
      }
    </style>
    <div>
      <button class="normal-run">批量任务-常规模式</button>
      <button class="rid-run">批量任务-Rid模式</button>
    </div>
    <input type="text" />
    <div class="box"></div>
    <div class="result">XXX</div>

    <script>
      function result(text) {
        const result = document.querySelector('.result');
        result.innerHTML = text;
      }
      const normalBtn = document.querySelector('.normal-run');
      const ridBtn = document.querySelector('.rid-run');
      normalBtn.addEventListener('click', () => {
        result('常规开始');
        console.time('常规');
        normarlRun();
        console.timeEnd('常规');
      });

      ridBtn.addEventListener('click', () => {
        result('RID开始');
        console.time('RID');
        // ridRun();
        ridRun2();
        console.timeEnd('RID');
      });

      function singleTask() {
        const now = performance.now();
        while (performance.now() - now < 0.001) {} // 模拟耗时操作
      }

      const data = new Array(20000).fill(0);

      function normarlRun() {
        for (let i = 0; i < data.length; i++) {
          singleTask(data[i]);
        }
        result('done');
      }

      function ridRun() {
        let i = 0;
        let option = { timeout: 2000 }; // 任务超时时间
        function handler(idleDeadline) {
          console.log('==idleDeadline.timeRemaining()====>', idleDeadline.timeRemaining());
          while ((idleDeadline.timeRemaining() || idleDeadline.didTimeout) && i < data.length) {
            // 当前帧有剩余时间，或已任务已等待超时强制执行
            singleTask(data[i++]);
          }

          if (i < data.length) {
            window.requestIdleCallback(handler, option);
          } else {
            result('done');
          }
        }

        window.requestIdleCallback(handler, option);
      }

      function ridRun2() {
        // for (let i = 0; i < data.length; i++) {
        //   _runTask1(() => {
        //     singleTask(data[i]);
        //   });
        // }

        for (let i = 0; i < 5; i++) {
          _runTask1(() => {
            // singleTask(data[i]);
            console.log('== 当前====>', i);
          });
        }

        result('done');
      }

      function _runTask1(task) {
        requestIdleCallback((e) => {
          if (e.timeRemaining()) {
            console.log('== 当前 有 空闲 ====>');
            task();
          } else {
            console.log('== 当前 没有 空闲 ====>');
            _runTask1(task);
          }
        });
      }
      function _runTask2(task) {
        const start = Date.now();
        requestAnimationFrame(() => {
          if (Date.now() - start < 16.6) {
            task();
          } else {
            _runTask2(task);
          }
        });
      }

      // const useF = () => {
      //   let count = 0;
      //   setTimeout(() => {
      //     count++;
      //   }, 3000);
      //   return count;
      // };

      // const re = useF();
      // console.log('==re====>', re);
      // vue 分片渲染
      // const useDefer = (maxFrameCount = 1000000) => {
      //   let frameCount = 0;
      //   const refreshFrameCount = () => {
      //     window.requestAnimationFrame(() => {
      //       frameCount++;

      //       if (frameCount < maxFrameCount) {
      //         refreshFrameCount();
      //       }
      //     });
      //   };
      //   refreshFrameCount();
      //   return function (showInFrameIndex) {
      //     console.log('frameCount', frameCount);

      //     return frameCount >= showInFrameIndex;
      //   };
      // };
      // const isRender = useDefer();

      // for (let index = 0; index < 100; index++) {
      //   const t = isRender(index);
      //   console.log('t', t);
      // }
    </script>
  </body>
</html>
